<section class="contact-s2" id="sonjuhe-contact">
    <div class="sonjuhe-contact-kuang w1600">
        <div class="sonjuhe-contact-kuang-left">
            <div class="sonjuhe-contcat-left-k">
                <p class="sonjuhe-contact-k-title">
                    Let's Illuminate Your
                    Next <b>Project Together</b>
                </p>
                <p class="sonjuhe-contact-k-nr">
                    Ready to discuss your solar streetlight requirements? Partner with HIPO Lighting
                    for
                    reliable, high-performance HIPO solar solutions tailored to your OEM/ODM needs.
                    <br>
                    <br>
                    Our team is ready to provide expert consultation and competitive quotations.
                </p>
                <span class="sonjuhe-span-img">
    										<img src="/static/images/contactbottomtx.png" alt="{$navData.seo_title}">
    									</span>
            </div>

        </div>
        <div class="sonjuhe-contact-kuang-right">
            <p class="sonjuhe-contact-k-title">Enter your information below for our team to
                <b>contact you.</b>
            </p>
            <form action="" class="" id="bottom_form2" method="post" novalidate>
                <p>
                    <label for="username">Name *</label>
                    <input type="text" placeholder="Name" name="username" required/>
                    <span class="error-msg" data-error="username">Please enter your name</span>
                </p>
                <p>
                    <label for="phone">Phone*</label>
                    <input type="tel" placeholder="Phone" name="phone" required/>
                    <span class="error-msg" data-error="phone">Please enter a valid phone
    											number</span>
                </p>
                <p>
                    <label for="company">Company *</label>
                    <input type="text" placeholder="Company" name="company" required/>
                    <span class="error-msg" data-error="company">Please enter your company</span>
                </p>
                <p>
                    <label for="email">Email Address *</label>
                    <input type="email" placeholder="Email" name="email" required/>
                    <span class="error-msg" data-error="email">Please enter a valid emailaddress</span>
                </p>
                <!-- 单选下拉框 -->
                <p>
                    <label for="type">Select type *</label>
                    <select name="type" id="type" class="custom-select" required>
                        <option value="ODM">ODM</option>
                        <option value="OEM">OEM</option>
                    </select>
                    <span class="error-msg" data-error="type">Please select a type</span>
                </p>
                <!-- 多选下拉框 -->
                <div class="selectxiala">
                    <label for="type-products">Select products *</label>
                    <div class="custom-multiselect-wrapper">
                        <div class="multiselect-display">Please Select</div>
                        <div class="multiselect-dropdown">
                            {volist name="products" id="vo" key="k"}
                            <label><input type="checkbox" value="{$vo.name}" class="multiselect-option">{$vo.name}</label>
                            {/volist}
                        </div>
                        <select name="products[]" id="products" class="hidden-select" multiple required style="display: none;"></select>
                    </div>
                </div>

                <p class="tea">
                    <label for="message">Message</label>
                    <textarea rows="" cols="" placeholder="I need help with the next problem" name="message" required></textarea>
                    <span class="error-msg" data-error="message">I need help with the nextproblem</span>
                </p>
                <div>
                    <p>
                        <input class="checkboxinput" name="Checkbox" type="checkbox" required/>
                        I have read and understood HIPO' Privacy Policy. By clicking on the button
                        below, I consent to allow HIPO to store and process the personal information
                        submitted above to use it for processing my order and delivering the
                        requested
                        goods and services, and answering any requests I have submitted.*
                    </p>

                    <!-- <a href="/privacy-policy" target="_blank" class="ysxy">Privacy Agreement</a> -->
                    <span class="error-msg" data-error="Checkbox">You must agree to the <a href="/privacy_notice.html" target="_blank">privacypolicy</a></span>
                </div>

                <div>
                    <p>
                        <input class="checkboxinput" name="Checkbox2" type="checkbox" required/>
                        I agree that Guangdong Hipo lighting Co., Ltd. will contact me to
                        communicate its products, services, and related content.
                    </p>
                    <!-- <a href="/privacy-policy" target="_blank" class="ysxy">Privacy Agreement</a> -->
                    <span class="error-msg" data-error="Checkbox2">You must agree to the <a href="/privacy_notice.html" target="_blank">privacypolicy</a></span>
                </div>
                <div id="whatsapp" data-phone="{$systemInfo.whatsapp_account|default=''}"></div>
                <input type="button" class="stbtanc submitBtn2" value="Submit"/>
            </form>

        </div>
    </div>
</section>
<script>
    // 添加邮箱验证函数
    function isValidEmail(email) {
        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        return emailRegex.test(email);
    }
    // 添加手机验证函数
    function isValidPhoneNumber(phone) {
        const phoneRegex = /^\d{8,}$/; // 至少 8 位数字
        return phoneRegex.test(phone);
    }

    function generateWhatsAppMessage(params) {
        let selectedProducts = [];  // 收集产品多选
        $('.multiselect-option:checked').each(function () {
            selectedProducts.push($(this).val());
        });

        return `姓名: ${params.username || ''}\n`
            + `电话: ${params.phone || ''}\n`
            + `邮箱: ${params.email || ''}\n`
            + `公司名称: ${params.company || ''}\n`
            + `产品类型: ${params.type || ''}\n`
            + `产品选择: ${selectedProducts.join(', ') || '未选择'}\n`
            + `留言: ${params.message || ''}\n`;
    }

    $(".submitBtn2").click(function () {
        let params = {};
        let inputs = $("#bottom_form2 input");
        for (let i = 0; i < inputs.length; i++) {
            let input = inputs[i];
            if (input.hasAttribute('required') && $(input).val() === "") {
                alert('This input field is required, please fill in the content!');
                return false;
            }

            if ($(input).attr('name') === 'email') {
                const emailValue = $(input).val();
                if (!isValidEmail(emailValue)) {
                    alert('Please enter a valid email address!');
                    $(input).focus();
                    return false;
                }
            }

            if ($(input).attr('name') === 'phone') {
                const phoneValue = $(input).val();
                if (!isValidPhoneNumber(phoneValue)) {
                    alert('Phone number must be at least 8 digits!');
                    $(input).focus();
                    return false;
                }
            }

            params[$(input).attr('name')] = $(input).val();
        }

        // 验证留言
        params['message'] = $('#bottom_form2 textarea[name="message"]').val();
        if (params['message'] === '') {
            alert('Please enter your message!');
            return false;
        }

        // 验证产品多选框
        let selectedProducts = $('.multiselect-option:checked');
        if (selectedProducts.length === 0) {
            alert('Please select at least one product.');
            return false;
        }
        // 提取值组成字符串
        let productValues = selectedProducts.map(function () {
            return $(this).val();
        }).get(); // -> array

        params["product_name"] = productValues.join(', ');

        // 验证产品类型
        const typeVal = $("#type").val();
        if (!typeVal) {
            $('span[data-error="type"]').show();
            alert("Please select a type!");
            return;
        }
        params["type"] = typeVal;

        // 验证隐私
        if (!$('#bottom_form2 input[name="Checkbox"]').is(':checked')) {
            alert('Please check the privacy checkbox before submitting the form.');
            return false;
        }

        // 验证同意联系
        if (!$('#bottom_form2 input[name="Checkbox2"]').is(':checked')) {
            alert('Please check the privacy checkbox before submitting the form.');
            return false;
        }
        params['url'] = window.location.href;
        var _this = this;
        $(_this).val('Submitting...').attr('disabled', true);
        $.post('feedback', params, function (res) {
            for (let i = 0; i < inputs.length; i++) {
                let input = inputs[i];
                $(input).val('');
            }
            // 清空 textarea
            $('#bottom_form2 textarea[name="message"]').val('');

            // 清空产品多选框
            $('.multiselect-option').prop('checked', false); // 取消选中
            $('.multiselect-display').text('Please Select'); // 恢复默认显示
            $('#products').empty(); // 清空隐藏 select 里的选项

            // 隐藏弹窗
            $('.popupBox').hide();
            $(_this).val('Submit').attr('disabled', false);
        });
        //拼接 WhatsApp 消息
        let message = encodeURIComponent(generateWhatsAppMessage(params));
        let phoneNumber = document.getElementById('whatsapp').dataset.phone; // WhatsApp 接收号码
        let whatsappUrl = `https://wa.me/${phoneNumber}?text=${message}`;
        window.open(whatsappUrl, '_blank');
    });
</script>
